<template>
  <figcaption class="photo-box"
              :class="{ center: isCenter }"
              :style="style"
              @click="handleClick">

    <div class="photo-box-obverse">
      <section class="photo-box-img">
        <img class="photo" :src="src" alt="title">
      </section>

      <section class="photo-box-title">{{ title }}</section>
    </div>

    <div class="photo-box-reverse">
      <section class="desc">{{ desc }}</section>
    </div>

  </figcaption>
</template>

<script>
  export default {
    name: 'photo-box',
    props: ['isCenter', 'index', 'src', 'title', 'desc', 'x', 'y', 'rotate', 'isInverse'],
    computed: {
      transform () {
        const translateX = this.x + (this.isInverse ? 300 : 0)
        const translateY = this.y
        const rotate = this.rotate
        const rotateY = this.isInverse ? 180 : 0

        const transform = {
          translateX: translateX + 'px',
          translateY: translateY + 'px',
          rotate: rotate + 'deg',
          rotateY: rotateY + 'deg',
        }

        return _.chain(transform)
                .toPairs()
                .map(([fn, arg]) => `${fn}(${arg})`)
                .join(' ')
                .value()
      },

      style () { return { transform: this.transform } },
    },
    methods: {
      handleClick () { this.$emit('click', this.index) },
    },
  }
</script>

<style lang="scss" scoped>
  $background-color: #EEE;
  $color: #979092;
  $width: 300px;
  $height: 250px;

  .photo-box {
    display: flex;

    position: absolute;
    top: 0;
    left: 0;

    width: $width;
    height: $height;

    transform-style: preserve-3d;
    transform-origin: 0 50% 0;
    transition: transform .6s ease-in-out, left .6s ease-in-out, top .6s ease-in-out;

    color: $color;
    user-select: none;
    cursor: pointer;

    &.center {
      z-index: 1;
    }

    @at-root
    .photo-box-obverse,
    .photo-box-reverse {
      display: flex;
      flex-direction: column;
      flex-shrink: 0;

      padding: 1.4em;
      width: 100%;
      height: 100%;

      background-color: $background-color;
      backface-visibility: hidden;
    }

    @at-root
    .photo-box-reverse {
      transform-origin: left;
      transform: rotateY(180deg);
    }

    @at-root
    .photo-box-obverse {
      @at-root
      .photo-box-img {
        display: flex;
        flex: 1 1 0;

        background: #DDD;

        > .photo {
          flex: 1 1 0;
          object-fit: cover;
          object-position: center;
          overflow: hidden;
        }
      }

      @at-root
      .photo-box-title {
        display: flex;
        justify-content: center;
        align-items: center;

        flex-grow: 0;
        font-size: 1.4em;
        height: 2em;
      }
    }
  }

</style>
